<template>
	<view class="page">

		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="圈子管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()" @clickRight="onsubmit">

				<block slot="right">
					<view class="nav_right_btn flex_r_around">
						<text>保存</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="function">
			<view class="title_block flex_r_between">
				<view class="block flex_center">
					<view class="title">圈子功能</view>
					<!-- <text>(多选)</text> -->
					<text>(不可编辑)</text>
				</view>
				<view class="icon" style="padding: 0 10rpx;" @click="show_modal = true">
					<u-icon name="question-circle" size="32rpx" color="#B0B0B0"></u-icon>
				</view>
			</view>

			<view class="list">
				<view class="flex_center">
					<view class="item flex_center" @click="info.article_open = info.article_open == 1 ? 0 : 1">
						<text>动态</text>
						<image :src="`/static/public/select_circle${info.article_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.active_open = info.active_open == 1 ? 0 : 1">
						<text>活动</text>
						<image :src="`/static/public/select_circle${info.active_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.group_open = info.group_open == 1 ? 0 : 1">
						<text>群聊</text>
						<image :src="`/static/public/select_circle${info.group_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.member_open = info.member_open == 1 ? 0 : 1">
						<text>成员</text>
						<image :src="`/static/public/select_circle${info.member_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.card_open = info.card_open == 1 ? 0 : 1">
						<text>名片</text>
						<image :src="`/static/public/select_circle${info.card_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.live_open = info.live_open == 1 ? 0 : 1">
						<text>直播</text>
						<image :src="`/static/public/select_circle${info.live_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.goods_open = info.goods_open == 1 ? 0 : 1">
						<text>商品</text>
						<image :src="`/static/public/select_circle${info.goods_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="nav_name">
			<view class="title">导航名称修改</view>
			<view class="nav_name_content flex_center">
				<view class="nav_name_item flex_r_between" v-if="info.article_open == 1"
					@click="article_tab_show = true">
					<text>{{ info.article_tab_name || '动态' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.active_open == 1" @click="active_tab_show = true">
					<text>{{ info.active_tab_name || '活动' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.group_open == 1" @click="group_tab_show = true">
					<text>{{ info.group_tab_name || '群聊' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.card_open == 1" @click="card_tab_show = true">
					<text>{{ info.card_tab_name || '名片' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.member_open == 1" @click="member_tab_show = true">
					<text>{{ info.member_tab_name || '成员' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.live_open == 1" @click="live_tab_show = true">
					<text>{{ info.live_tab_name || '直播' }}</text>
					<i>修改</i>
				</view>

				<view class="nav_name_item flex_r_between" v-if="info.goods_open == 1" @click="goods_tab_show = true">
					<text>{{ info.goods_tab_name || '商品' }}</text>
					<i>修改</i>
				</view>
			</view>
		</view>

		<view class="from" v-if="info.article_open == 1">
			<view class="title">发布动态权限</view>
			<view class="content">
				<view class="list flex_r_between" @click="info.article_pub = 2">
					<view class="label">仅自己发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.article_pub == 2 ? '_s' : ''}.png`"></image>
					</view>
				</view>

				<view class="list flex_r_between" @click="info.article_pub = 1">
					<view class="label">所有人发布</view>
					<view class="select">
						<image
							:src="`/static/public/select_circle${info.article_pub == 1 || info.article_pub == 3 || info.article_pub == 4 ? '_s' : ''}.png`">
						</image>
					</view>
				</view>

				<!-- <view class="list flex_r_between" @click="info.article_pub = 4">
					<view class="label">付费发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.article_pub == 4 ? '_s' : ''}.png`"></image>
					</view>
				</view> -->


				<view class="list_box flex_r_between"
					v-if="info.article_pub == 1 || info.article_pub == 3 || info.article_pub == 4">
					<view class="list list_flex_1 flex_r_between" @click="info.article_pub = 1">
						<view class="label">免费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.article_pub == 1 ? '_s' : ''}.png`">
							</image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.article_pub = 3">
						<view class="label">会员</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.article_pub == 3? '_s' : ''}.png`"></image>
						</view>
					</view>
					<!-- <view class="list list_flex_1 flex_r_between" @click="info.article_pub = 4">
						<view class="label">付费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.article_pub == 4? '_s' : ''}.png`"></image>
						</view>
					</view> -->
				</view>
				<!-- <view class="list flex_r_between" v-if="info.article_pub == 4">
					<view class="label">入圈金额</view>
					<view class="input flex_center">
						<input type="text" placeholder="请输入金额" placeholder-class="input-placeholder"
							v-model="info.article_pub_price" />
						<text>元/月</text>
					</view>
				</view> -->

			</view>

			<view class="content" v-if="info.article_pub != 2">
				<view class="list flex_r_between">
					<uni-tooltip content="用户查看视频需要付费，如：视频课程、知识付费、短剧等" placement="bottom" ref="til">
						<view class="label flex_center" @click="showTil">
							<text>开通查看视频付费权限</text>
							<u-icon name="question-circle" color="#999999" size="24rpx"></u-icon>
						</view>
					</uni-tooltip>
					<view class="select" @click="onArticleWatchPayOpen">
						<image :src="`/static/public/select_circle${info.article_watch_pay_open == 1 ? '_s' : ''}.png`">
						</image>
					</view>
				</view>
				<view class="list flex_r_between" v-if="info.article_watch_pay_open == 1">
					<view class="label">设置抽成比例</view>
					<view class="input flex_center">
						<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.article_watch_commission" maxlength="2" />
						<text>%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="from" v-if="info.active_open == 1">
			<view class="title">发布活动权限</view>
			<view class="content">
				<view class="list flex_r_between" @click="info.active_pub = 2">
					<view class="label">仅自己发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.active_pub == 2? '_s' : ''}.png`"></image>
					</view>
				</view>
				<view class="list flex_r_between" @click="info.active_pub = 1">
					<view class="label">所有人发布</view>
					<view class="select">
						<image
							:src="`/static/public/select_circle${info.active_pub == 1 || info.active_pub == 3 || info.active_pub == 4 ? '_s' : ''}.png`">
						</image>
					</view>
				</view>
				<!-- <view class="list flex_r_between" @click="info.active_pub = 4">
					<view class="label">付费发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.active_pub == 4? '_s' : ''}.png`"></image>
					</view>
				</view> -->

				<view class="list_box flex_r_between"
					v-if="info.active_pub == 1 || info.active_pub == 3 || info.active_pub == 4">
					<view class="list list_flex_1 flex_r_between" @click="info.active_pub = 1">
						<view class="label">免费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.active_pub == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.active_pub = 3">
						<view class="label">会员</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.active_pub == 3? '_s' : ''}.png`"></image>
						</view>
					</view>
					<!-- <view class="list list_flex_1 flex_r_between" @click="info.active_pub = 4">
						<view class="label">付费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.active_pub == 4? '_s' : ''}.png`"></image>
						</view>
					</view> -->
				</view>
				<!-- <view class="list flex_r_between" v-if="info.active_pub == 4">
					<view class="label">付费金额</view>
					<view class="input flex_center">
						<input type="text" placeholder="请输入金额" placeholder-class="input-placeholder"
							v-model="info.active_pub_price" />
						<text>元/月</text>
					</view>
				</view> -->
			</view>

			<view class="content" v-if="info.active_pub != 2">
				<view class="list flex_r_between">
					<view class="label">设置付费活动抽成比例</view>
					<view class="input flex_center">
						<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.active_apply_commission" maxlength="2" />
						<text>%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="from" v-if="info.live_open == 1">
			<view class="title">直播权限</view>
			<view class="content">
				<view class="list flex_r_between" @click="info.live_pub = 2">
					<view class="label">仅自己</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.live_pub == 2? '_s' : ''}.png`"></image>
					</view>
				</view>
				<view class="list flex_r_between" @click="info.live_pub = 1">
					<view class="label">所有人</view>
					<view class="select">
						<image
							:src="`/static/public/select_circle${info.live_pub == 1 || info.live_pub == 3 || info.live_pub == 4 ? '_s' : ''}.png`">
						</image>
					</view>
				</view>

				<view class="list_box flex_r_between"
					v-if="info.live_pub == 1 || info.live_pub == 3 || info.live_pub == 5">
					<view class="list list_flex_1 flex_r_between" @click="info.live_pub = 1">
						<view class="label">免费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.live_pub == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.live_pub = 3">
						<view class="label">会员</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.live_pub == 3? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.live_pub = 5">
						<view class="label">指定直播</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.live_pub == 5? '_s' : ''}.png`"></image>
						</view>
					</view>
				</view>
				<view class="list flex_r_between" v-if="info.live_pub == 5">
					<view class="label">指定人列表</view>
					<view class="input flex_center" @click="toChooseLiveMember">
						<view class="people_list flex_center">
							<image :src="item.avatar" mode="aspectFill" v-for="(item,index) in liveMemberList"
								:key="index" v-if="index <= 5"></image>
							<text v-if="!liveMemberList.length">请选择</text>
						</view>
						<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="content" v-if="info.live_pub != 2">
				<view class="list flex_r_between">
					<view class="label">设置礼物打赏抽成比例</view>
					<view class="input flex_center">
						<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.live_gift_commission" maxlength="2" />
						<text>%</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="from" v-if="info.card_open == 1">
			<view class="title">卡片权限</view>
			<view class="content">
				<view class="list flex_r_between" @click="info.card_pub = 2">
					<view class="label">仅自己发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.card_pub == 2? '_s' : ''}.png`"></image>
					</view>
				</view>
				<view class="list flex_r_between" @click="info.card_pub = 1">
					<view class="label">所有人发布</view>
					<view class="select">
						<image
							:src="`/static/public/select_circle${info.card_pub == 1 || info.card_pub == 3 || info.card_pub == 4 ? '_s' : ''}.png`">
						</image>
					</view>
				</view>
				<view class="list flex_r_between" @click="info.card_pub = 4">
					<view class="label">付费发布</view>
					<view class="select">
						<image :src="`/static/public/select_circle${info.card_pub == 4? '_s' : ''}.png`"></image>
					</view>
				</view>


				<view class="list_box flex_r_between"
					v-if="info.card_pub == 1 || info.card_pub == 3 || info.card_pub == 4">
					<view class="list list_flex_1 flex_r_between" @click="info.card_pub = 1">
						<view class="label">免费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.card_pub == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.card_pub = 3">
						<view class="label">会员</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.card_pub == 3? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list list_flex_1 flex_r_between" @click="info.card_pub = 4">
						<view class="label">付费</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.card_pub == 4? '_s' : ''}.png`"></image>
						</view>
					</view>
				</view>
				<view class="list flex_r_between" v-if="info.card_pub == 4">
					<view class="label">付费金额</view>
					<view class="input flex_center">
						<input type="text" placeholder="请输入金额" placeholder-class="input-placeholder"
							v-model="info.card_pub_price" />
						<text>元</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="card">
			<view class="title">成员展示样式</view>

			<view class="content flex_r_between">
				<view class="item flex_c" @click="info.card_list_style = 2">
					<view class="top flex_center">
						<image :src="`/static/public/select_circle${info.card_list_style == 2 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
						<text>双列</text>
					</view>
					<view class="bottom" :id="info.card_list_style ==2 ? 'select' : ''">
						<image :src="$util.prefix('circle/circle_preview1.png')" mode="aspectFill"></image>
					</view>
				</view>

				<view class="item flex_c" @click="info.card_list_style = 1">
					<view class="top flex_center">
						<image :src="`/static/public/select_circle${info.card_list_style == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
						<text>单列</text>
					</view>
					<view class="bottom" :id="info.card_list_style ==1 ? 'select' : ''">
						<image :src="$util.prefix('circle/circle_preview2.png')" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view> -->

		<view class="lock">
			<view class="title flex_r_between" @click="openLock">
				<text>会员</text>
				<image :src="`/static/public/select_circle${info.vip_open == 1 ? '_s' : ''}.png`"></image>
			</view>
			<view class="p24" v-if="info.vip_open == 1">
				<view class="text">
					VIP权益包括：1、解锁聊天 2、解锁评论
					3、专属私人客服，反馈极速处理 4、VIP标识
				</view>

				<view class="content">
					<view class="list flex_r_between">
						<view class="label">1个月</view>
						<view class="input flex_center">
							<input type="numeric" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_month_price" @input="handleInput1" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">6个月</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_season_price" @input="handleInput2" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">12个月</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_year_price" @input="handleInput3" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">永久</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_forever_price" @input="handleInput4" />
							<text>元</text>
						</view>
					</view>
				</view>

				<view class="type flex_r_between" @click="onType(1)">
					<text>邀请用户送会员</text>
					<image :src="`/static/public/select_circle${lock_invite ? '_s' : ''}.png`"></image>
				</view>

				<view class="box" v-if="lock_invite">
					<view class="input_text flex_r_between">
						<view class="item flex_r_between">
							<text>邀请</text>
							<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
								v-model="info.share_people_num" />
							<text>人</text>
						</view>
						<view class="item flex_r_between">
							<text>解锁</text>
							<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
								v-model="info.open_month_num" />
							<text>月会员</text>
						</view>
					</view>

					<view class="input_text flex_r_between">
						<view class="item flex_r_between">
							<text>邀请</text>
							<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
								v-model="info.share_num_open_long_vip" />
							<text>人</text>
						</view>
						<view class="item flex_r_between">
							<text></text>
							<text>永久解锁会员</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="circle">
			<view class="title flex_r_between">
				<text>圈子权限</text>
				<text></text>
			</view>
			<view class="p24">

				<view class="content">
					<view class="list flex_r_between" @click="onJoinFree">
						<view class="label">免费加入</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.join_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>
				</view>

				<view class="content">
					<view class="list flex_r_between" @click="onJoinPay">
						<view class="label">付费加入</view>
						<view class="select">
							<image :src="`/static/public/select_circle${info.join_type == 3 ? '_s' : ''}.png`"></image>
						</view>
					</view>
					<view class="list flex_r_between" v-if="info.join_type == 3">
						<view class="label">入圈金额</view>
						<view class="input flex_center">
							<input type="text" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.join_need_mony" />
							<text>元</text>
						</view>
					</view>
				</view>

				<!-- 不可以只选仅邀请   2025.03.13  第三版 -->
				<!-- 不可以只选仅邀请   2025.03.19  第四版 -->

				<view class="content">
					<view class="list flex_r_between" @click="onInviteActive">
						<view class="label">分享圈子免费加入</view>
						<view class="select">
							<image :src="`/static/public/select_circle${invite_active ? '_s' : ''}.png`"></image>
						</view>
					</view>
					<!-- @click="show_share_people = true" -->
					<view class="list flex_r_between" v-if="invite_active">
						<view class="label">邀请</view>
						<view class="input flex_center noflex">
							<!-- <view class="view" :id="info.join_need_people ? '' : 'nohave'">
								{{ info.join_need_people || '请选择' }}
							</view> -->
							<view class="box_input">
								<input type="number" v-model="info.join_need_people" placeholder="请输入"
									placeholder-class="input-placeholder" />
							</view>
							<text>人</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- <view class="btn flex_r_around" @click="onsubmit">
			<text>保存</text>
		</view> -->

		<u-popup :show="show_modal" mode="center" @close="show_modal = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="title">圈子功能</view>
				<view class="text">根据需求选择功能，创建成功后点击圈子管理，可修改功能名称及权限设置</view>
				<view class="modal_btn flex_r_between">
					<view class="item submit flex_r_around" @click="show_modal = false">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- goods_tab_name 商品功能项名称 -->
		<u-popup :show="goods_tab_show" @close="goods_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="goods_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.goods_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="goods_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- live_tab_name 直播功能项名称 -->
		<u-popup :show="live_tab_show" @close="live_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="live_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.live_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="live_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- card_tab_name 成员功能项名称 -->
		<u-popup :show="card_tab_show" @close="card_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="card_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.card_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="card_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<u-popup :show="member_tab_show" @close="member_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="member_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.member_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="member_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- group_tab_name 群聊功能项名称 -->
		<u-popup :show="group_tab_show" @close="group_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="group_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.group_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="group_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- active_tab_name 活动功能项名称 -->
		<u-popup :show="active_tab_show" @close="active_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="active_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.active_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="active_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- article_tab_name 动态功能项名称 -->
		<u-popup :show="article_tab_show" @close="article_tab_show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>修改</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="article_tab_show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="info.article_tab_name"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="article_tab_show = false">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<u-action-sheet :actions="share_people_list" title="" :show="show_share_people"
			@close="show_share_people = false" @select="onSharePeople" cancelText="取消">
		</u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_tab_show: false,
				live_tab_show: false,
				card_tab_show: false,
				group_tab_show: false,
				article_tab_show: false,
				active_tab_show: false,
				member_tab_show: false,

				info: {
					// 圈子ID
					circle_id: 0,
					// 是否开放商品：0=否，1=开放
					goods_open: 0,
					// 是否开放活动：0=否，1=开放
					active_open: 0,
					// 是否开放动态：0=否，1=开放
					article_open: 0,
					// 群组是否开放：0=否，1=开放
					group_open: 0,
					// 卡片是否开放：0=否，1=开放
					card_open: 0,
					// 直播是否开放：0=否，1=开放
					live_open: 0,

					// 权限版本——————————
					// 动态发布权限：1=免费发布，2=仅自己(老板)，3=会员发布，4=付费发布
					article_pub: 1,
					// 动态发布收费金额
					article_pub_price: '',

					// 活动发布权限：1=免费发布，3=会员发布，4=付费发布
					active_pub: 1,
					// 活动发布收费金额
					active_pub_price: '',

					// 卡片发布权限：1=免费发布，3=会员发布，4=付费发布
					card_pub: 1,
					// 卡片发布收费金额
					card_pub_price: '',

					// 卡片发布权限：1=免费发布，3=会员发布，4=付费发布
					member_open: 1,

					// 开播发布权限：1=所有人，2=仅自己发布，3=会员开播，5=指定人播
					live_pub: 1,
					// 直播礼物抽成
					live_gift_commission: '',

					// 邀请几人开通多长时间VIP-邀请人数
					share_people_num: '',
					// 邀请几人开通多长时间VIP-开通时长（月）
					open_month_num: '',
					// 邀请几人开通永久VIP
					share_num_open_long_vip: '',

					// vip 是否解锁
					vip_open: 0,
					// 月会员价格
					vip_month_price: '',
					// 季会员价格
					vip_season_price: '',
					// vip年价格
					vip_year_price: '',
					// vip永久价格
					vip_forever_price: '',

					// 加入类型：1=免费加入，2=仅申请加入，3=收费加入，4=仅邀请加入, 5=活动(邀请加入免入圈费)
					join_type: 1,
					// 活动邀请多少人
					join_need_people: '',
					// 付费加入所需金额
					join_need_mony: '',

					// 活动(邀请加入免入圈费)
					// 商品功能项名称
					goods_tab_name: '商品',
					// 活动功能项名称
					active_tab_name: '活动',
					// 动态功能项名称
					article_tab_name: '动态',
					// 群聊功能项名称
					group_tab_name: '群聊',
					// 卡片功能项名称
					card_tab_name: '卡片',
					// 直播功能项名称
					live_tab_name: '直播',
					// 成员功能名称
					member_tab_name: '成员',
					// 动态 是否开通付费观看权限 0=否，1=开通
					article_watch_pay_open: 0,
					// 动态付费观看抽成
					article_watch_commission: '',
					// 活动报名抽成
					active_apply_commission: '',
					// 成员列表样式：1=单列，2=双列
					// card_list_style: 2,
					live_pub_uids: [],
				},

				// 直播指定人
				liveMemberList: [],

				open_lock: false,
				lock_invite: false,
				lock_vip: true,

				show_modal: false,

				invite_active: false,


				show_share_people: false,
				share_people_list: [{
						name: '邀请1人免费加入',
						num: 1,
					},
					{
						name: '邀请2人免费加入',
						num: 2,
					},
					{
						name: '邀请3人免费加入',
						num: 3,
					},
					{
						name: '邀请4人免费加入',
						num: 4,
					},
				],

			}
		},
		methods: {

			handleInput1(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_month_price = event.detail.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput2(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_season_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput3(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_year_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput4(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_forever_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			onEenterTag(e) {
				if (!this.tags_input) {
					return this.$util.msg('请填写标签');
				}
				if (this.info.tags.length < 10) {
					this.info.tags.push(this.tags_input);
				}
				this.tags_input = '';
			},

			openLock() {
				this.info.vip_open = this.info.vip_open == 1 ? 0 : 1;
				if (this.info.vip_open == 0) {
					this.info.share_people_num = '';
					this.info.open_month_num = '';
					this.info.share_num_open_long_vip = '';
					this.info.vip_month_price = '';
					this.info.vip_season_price = '';
					this.info.vip_year_price = '';
					this.info.vip_forever_price = '';
					this.lock_invite = false;
				}
			},

			onType(type) {
				if (type == 1) {
					this.lock_invite = !this.lock_invite;
					if (!this.lock_invite) {
						this.info.share_people_num = '';
						this.info.open_month_num = '';
						this.info.share_num_open_long_vip = '';
					}
				} else {
					this.lock_vip = !this.lock_vip;
					if (!this.lock_vip) {
						this.info.vip_month_price = '';
						this.info.vip_season_price = '';
						this.info.vip_year_price = '';
						this.info.vip_forever_price = '';
					}
				}
			},

			getCircleManageInfo() {
				this.$get('/circle.circle/getCircleManageInfo', {
					circle_id: this.info.circle_id
				}).then(res => {
					this.info = res.data;
					this.info.circle_id = res.data.id;
					this.info.vip_open = Number(this.info.vip_open);
					this.liveMemberList = res.data.liveMemberList;
					delete this.info.equity;
					if (this.info.vip_month_price == 0) {
						this.info.vip_month_price = '';
					} else {
						this.info.vip_month_price = Number(this.info.vip_month_price).toFixed(0);
					}

					if (this.info.vip_season_price == 0) {
						this.info.vip_season_price = '';
					} else {
						this.info.vip_season_price = Number(this.info.vip_season_price).toFixed(0);
					}

					if (this.info.vip_year_price == 0) {
						this.info.vip_year_price = '';
					} else {
						this.info.vip_year_price = Number(this.info.vip_year_price).toFixed(0);
					}

					if (this.info.vip_month_price != 0 || this.info.vip_season_price != 0 || this.info
						.vip_year_price != 0) {
						this.info.vip_open = 1;
					}

					if (this.info.vip_forever_price == 0) {
						this.info.vip_forever_price = '';
					} else {
						this.info.vip_forever_price = Number(this.info.vip_forever_price).toFixed(0);
					}

					if (this.info.join_need_mony == 0) {
						this.info.join_need_mony = '';
					} else {
						this.info.join_need_mony = Number(this.info.join_need_mony);
					}

					if (this.info.article_pub_price == 0) {
						this.info.article_pub_price = '';
					} else {
						this.info.article_pub_price = Number(this.info.article_pub_price).toFixed(0);
					}

					if (this.info.active_pub_price == 0) {
						this.info.active_pub_price = '';
					} else {
						this.info.active_pub_price = Number(this.info.active_pub_price).toFixed(0);
					}

					if (this.info.card_pub_price == 0) {
						this.info.card_pub_price = '';
					} else {
						this.info.card_pub_price = Number(this.info.card_pub_price).toFixed(0);
					}

					if (this.info.join_need_people == 0) {
						this.info.join_need_people = '';
					} else {
						this.info.join_need_people = Number(this.info.join_need_people).toFixed(0);
						this.invite_active = true;
					}

					if (this.info.share_people_num == 0) {
						this.info.share_people_num = '';
					} else {
						this.info.share_people_num = Number(this.info.share_people_num).toFixed(0);
					}

					if (this.info.open_month_num == 0) {
						this.info.open_month_num = '';
					} else {
						this.info.open_month_num = Number(this.info.open_month_num).toFixed(0);
					}

					if (this.info.share_num_open_long_vip == 0) {
						this.info.share_num_open_long_vip = '';
					} else {
						this.info.share_num_open_long_vip = Number(this.info.share_num_open_long_vip).toFixed(0);
					}

					// lock_invite
					if (this.info.share_people_num != 0 || this.info.open_month_num != 0 || this.info
						.share_num_open_long_vip != 0) {
						this.lock_invite = true;
					}

				})
			},

			onsubmit() {

				if (this.info.live_pub == 5 && this.info.live_open == 1) {
					if (!this.liveMemberList.length) {
						return this.$util.msg('请选择指定直播人');
					}
				}

				if (this.info.article_pub == 4 && !this.info.article_pub_price) {
					return this.$util.msg('请填写发布动态价格');
				}

				if (this.info.active_pub == 4 && !this.info.active_pub_price) {
					return this.$util.msg('请填写发布活动价格');
				}

				// if (this.info.card_pub == 4 && !this.info.card_pub_price) {
				// 	return this.$util.msg('请填写发布名片价格');
				// }

				if (this.info.join_type == 3) {
					if (!this.info.join_need_mony || Number(this.info.join_need_mony) == 0) {
						return this.$util.msg('请填写入圈金额');
					}
				}

				if (this.info.vip_open) {
					if (!this.info.vip_month_price || Number(this.info.vip_month_price) == 0) {
						return this.$util.msg('请填写月会员价格');
					}
					if (!this.info.vip_season_price || Number(this.info.vip_season_price) == 0) {
						return this.$util.msg('请填写6个月会员价格');
					}
					if (!this.info.vip_year_price || Number(this.info.vip_year_price) == 0) {
						return this.$util.msg('请填写年会员价格');
					}
					if (!this.info.vip_forever_price || Number(this.info.vip_forever_price) == 0) {
						return this.$util.msg('请填写永久价格');
					}
				}

				if (this.lock_invite) {
					if (!this.info.share_people_num || !this.info.open_month_num) {
						return this.$util.msg('请填写邀请人数或解锁会员时长');
					}

					if (!this.info.share_num_open_long_vip) {
						return this.$util.msg('请填写开通永久VIP需邀请人数');
					}
				}

				if (this.invite_active && this.info.join_type == 3 && !this.info.join_need_people) {
					return this.$util.msg('请填写活动(邀请加入免入圈费)需邀请人数');
				}

				if (!this.info.join_need_people) {
					this.info.join_need_people = 0;
				}
				if (!this.info.join_need_mony) {
					this.info.join_need_mony = 0;
				}


				if (!this.lock_invite) {
					this.info.share_people_num = '';
					this.info.open_month_num = '';
				}

				if (this.info.article_watch_pay_open == 1) {
					if (Number(this.info.article_watch_commission) > 80) {
						if (this.info.article_pub != 2) {
							return this.$util.msg('抽成比例不可超过80%');
						}
					}
				}

				// goods_tab_name: '',
				// active_tab_name: '',
				// article_tab_name: '',
				// group_tab_name: '',
				// card_tab_name: '',
				// live_tab_name: '',
				if (this.info.active_open == 1) {
					if (!this.info.active_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.goods_open == 1) {
					if (!this.info.goods_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.article_open == 1) {
					if (!this.info.article_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.group_open == 1) {
					if (!this.info.group_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.card_open == 1) {
					if (!this.info.card_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.live_open == 1) {
					if (!this.info.live_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.member_open == 1) {
					if (!this.info.member_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (!this.info.active_tab_name) {
					this.info.active_tab_name = 'null';
				}

				if (!this.info.goods_tab_name) {
					this.info.goods_tab_name = 'null';
				}

				if (!this.info.article_tab_name) {
					this.info.article_tab_name = 'null';
				}

				if (!this.info.group_tab_name) {
					this.info.group_tab_name = 'null';
				}

				if (!this.info.card_tab_name) {
					this.info.card_tab_name = 'null';
				}

				if (!this.info.live_tab_name) {
					this.info.live_tab_name = 'null';
				}

				// // vip 是否解锁
				// vip_open: 0,
				// // 月会员价格
				// vip_month_price: '',
				// // 季会员价格
				// vip_season_price: '',
				// // vip年价格
				// vip_year_price: '',
				// // vip永久价格
				// vip_forever_price: '',
				if (this.info.active_open == 1 && this.info.active_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.card_open == 1 && this.info.card_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.article_open == 1 && this.info.article_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.live_open == 1 && this.info.live_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				// 1=所有人，2=仅自己发布，3=会员开播，5=指定人播
				if (this.info.active_open == 1 && !this.info.active_apply_commission) {
					if (this.info.active_pub != 2) {
						return this.$util.msg('请填写付费活动抽成比例');
					}
				}

				if (this.info.active_open == 1 && Number(this.info.active_apply_commission) > 80) {
					if (this.info.active_pub != 2) {
						return this.$util.msg('付费活动抽成比例最大为80%');
					}
				}

				if (this.info.live_open == 1 && Number(this.info.live_gift_commission || 0) > 80) {
					if (this.info.live_pub != 2) {
						return this.$util.msg('礼物抽成比例最大为80%');
					}
				}

				if (this.invite_active) {
					if (this.info.join_need_people == '0') {
						return this.$util.msg('请填写正确的邀请人数');
					}
				}

				var live_pub_uids = [];
				this.liveMemberList.forEach(element => {
					live_pub_uids.push(element.user_id);
				});
				this.info.live_pub_uids = live_pub_uids.join(',');
				this.$post('/circle.circle/submitCircleManage', this.info).then(res => {
					this.$util.msg(res.msg);
					this.$native.upgradeCircleSuccess(`${this.info.circle_id}`);
				})

			},

			onInviteActive() {
				if (this.invite_active) {
					this.info.join_need_people = '';
					this.invite_active = false;
					if (this.info.join_type == 5) {
						this.info.join_type = 1;
					}
				} else {
					// 加入类型：1=免费加入，2=仅申请加入，3=收费加入，4=仅邀请加入, 5=活动(邀请加入免入圈费)
					this.invite_active = true;
					if (this.info.join_type == 1) {
						this.info.join_type = 5;
					} else {
						this.info.join_type = 3;
					}
				}
			},

			onJoinFree() {
				this.info.join_type = 1;
				if (this.invite_active) {
					this.invite_active = false;
					this.info.join_need_people = '';
				}
			},

			onJoinPay() {
				if (this.info.join_type == 3) {
					if (!this.invite_active) {
						this.info.join_type = 1;
					} else {
						this.info.join_type = 5;
					}
				} else {
					this.info.join_type = 3;
				}
			},

			onArticleWatchPayOpen() {
				if (this.info.article_watch_pay_open == 0) {
					this.info.article_watch_pay_open = 1;
				} else {
					this.info.article_watch_pay_open = 0;
				}
			},

			showTil() {
				this.$refs.til.flag = !this.$refs.til.flag;
			},

			onSharePeople(e) {
				this.info.join_need_people = e.num;
			},

			// 指定人直播选择
			toChooseLiveMember() {
				this.$util.toUrl(`/pages/circle/liveMemberList?circle_id=${this.info.circle_id}`);
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.info.circle_id = option.circle_id || 0;

			this.getCircleManageInfo();
		},
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 32rpx;
	}

	.nav_right_btn {
		width: 128rpx;
		height: 52rpx;
		background: #FD2A53;
		border-radius: 28rpx;

		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.function {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 0 0 20rpx 0;

		.title_block {
			text {
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}

			.title {
				font-weight: 600;
				font-size: 28rpx;
				color: #131313;
				line-height: 36rpx;
			}
		}

		.list {
			overflow: hidden;
			padding-top: 10rpx;

			view {
				flex-wrap: wrap;
			}

			.item {
				flex-shrink: 0;
				padding: 10rpx 0;
				width: 25%;

				text {
					font-size: 26rpx;
					color: #131313;
					line-height: 36rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}

	}

	.from {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 4rpx 0 24rpx;
		margin-bottom: 20rpx;

		/deep/ .uni-tooltip-popup {
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #CCCCCC;
			font-size: 26rpx;
			color: #131313;
			line-height: 36rpx;
			padding: 24rpx 32rpx;
		}

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
			padding: 32rpx 24rpx;
			border-bottom: 2rpx solid #F1F1F1;
		}

		.content {
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 24rpx 24rpx 0;

			.list {
				height: 96rpx;
				padding: 0 24rpx;

				.label {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 16rpx;

					text {
						font-size: 28rpx;
						color: #333333;
						margin-right: 16rpx;
						margin-right: 8rpx;
					}
				}

				.select {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.people_list {
					flex: 1;
					flex-direction: row-reverse;
					padding-right: 8rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						margin-left: -8rpx;
						border-radius: 28rpx;
					}

					text {
						font-size: 26rpx;
						color: #999999 !important;
					}
				}

				.input {
					flex: 1;
					overflow: hidden;

					input {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 4rpx 0 24rpx;
		margin-bottom: 20rpx;

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
			padding: 32rpx 24rpx;
			border-bottom: 2rpx solid #F1F1F1;
		}

		.content {
			padding: 24rpx 24rpx 0;

			.top {
				margin-bottom: 24rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
				}
			}

			.bottom {
				width: 312rpx;
				height: 416rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 8rpx solid #F1F1F1;
				overflow: hidden;

				image {
					width: 304rpx;
					height: 408rpx;
				}
			}

			#select {
				border: 8rpx solid #FD2A53;
			}
		}
	}

	.lock {
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.p24 {
			padding: 24rpx;
		}

		.title {
			font-weight: 500;
			padding: 32rpx 24rpx;
			border-bottom: 2rpx solid #F1F1F1;

			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.text {
			width: 482rpx;
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
		}

		.type {
			margin-top: 20rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.input_text {
			height: 96rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin-top: 20rpx;

			.item {
				padding: 0 24rpx;

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 28rpx;
				}

				input {
					width: 112rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					text-align: center;
					font-size: 24rpx;
					color: #333;
					margin: 0 16rpx;
				}
			}
		}

		.content {
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 24rpx 0 0;
			overflow: hidden;

			.list {
				height: 96rpx;
				padding: 0 24rpx;
				overflow: hidden;

				.label {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 16rpx;
				}

				.select {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.input {
					flex: 1;
					overflow: hidden;

					input {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

	}

	.circle {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx 24rpx;

		.title {
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
			line-height: 36rpx;
		}

		.content {
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 24rpx 0 0;
			overflow: hidden;

			.list_box {
				.list_flex_1 {
					flex: 1;
				}
			}

			.list {
				height: 96rpx;
				padding: 0 24rpx;
				overflow: hidden;

				.label {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 16rpx;
				}

				.select {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.noflex {
					flex: 0 1 auto !important;
				}

				.input {
					flex: 1;
					overflow: hidden;

					input {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
					}

					#nohave {
						color: #999999;
					}

					.view {
						color: #333;
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						line-height: 28rpx;
					}

					.box_input {
						flex: 0 1 auto;
						text-align: center;
						width: 112rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 8rpx;

						input {
							width: 112rpx;
							height: 48rpx;
							text-align: center;
							font-size: 28rpx;
							color: #999999;
							line-height: 28rpx;
						}
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.btn {
		margin: 56rpx auto 0;
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.nav_name {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 20rpx;

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
		}

		.nav_name_content {
			margin-top: 24rpx;
			flex-wrap: wrap;

			.nav_name_item {
				margin: 7rpx;
				width: 304rpx;
				height: 80rpx;
				padding: 0 20rpx;
				background: #F1F1F1;
				border-radius: 16rpx;

				text {
					font-size: 26rpx;
					color: #131313;
				}

				i {
					font-size: 26rpx;
					color: #0984CD;
					font-style: normal;
				}
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 44rpx 62rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}
</style>